<template>
    <div class="medicine">
        <el-card class="main">
            <div class="topBtn">
                <div class="left">
                    <el-button type="success" size="small" @click="addMedicine">
                        <i class="el-icon-plus"></i>
                        新增</el-button>
                    <el-button type="info" size="small" @click="resetList">
                        <i class="el-icon-refresh-left"></i>
                        重置</el-button>
                    <download-excel style="display:inline-block;margin-left:10px;"
                        :data="json_data" :fields="json_fields" :header="headers"
                        :name="name">
                        <el-button type="success" size="small">
                            <i class="el-icon-upload"></i>
                            导出</el-button>
                    </download-excel>

                </div>
                <div class="right">
                    <el-input placeholder="请输入内容" class="input-with-select"
                        v-model="keywordName" clearable>
                        <el-button slot="append" icon="el-icon-search"
                            @click="normalSearch"></el-button>
                    </el-input>
                </div>

            </div>
            <!-- 药品列表 -->
            <div class="medicineList">
                <el-table ref="multipleTable" :data="tableData"
                    tooltip-effect="dark" style="width: 100%">

                    <el-table-column prop="img" label=" " width="40" align="center">
                        <template slot-scope="scope">
                            <img v-if="scope.row.img == ''"
                                src="../../../../public/images/notfoundImg.png"
                                alt="" width="30" height="30">
                            <img v-if="scope.row.img !== ''"
                                :src="$host + scope.row.img" alt="" width="30"
                                height="30">
                        </template>
                    </el-table-column>
                    <el-table-column prop="drugTypeName" label="药品分类" width="80">
                    </el-table-column>
                    <el-table-column prop="drugName" label="药品名称" width="80">
                    </el-table-column>
                    <el-table-column prop="serialNumber" label="药品编号" width="100">
                    </el-table-column>
                    <!-- <el-table-column prop="identifier" label="型号" show-overflow-tooltip>
                </el-table-column> -->
                    <el-table-column prop="price" label="客户单价" width="80">
                    </el-table-column>
                    <el-table-column prop="num" label="库存数量" width="80">
                    </el-table-column>
                    <el-table-column prop="unitName" label="单位" width="80">
                    </el-table-column>
                    <el-table-column prop="providerName" label="供应商"
                        show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column prop="createTime" label="创建时间"
                        show-overflow-tooltip>
                        <template slot-scope="scope">
                            {{
                                dayjs(scope.row.createTime)
                                    .format('YYYY-MM-DD HH: mm: ss') }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="status" label="状态" width="80">
                        <template slot-scope="scope">
                            <el-tag disable-transitions type="info"
                                v-if="scope.row.status == 1">
                                失效
                            </el-tag>
                            <el-tag disable-transitions type="success"
                                v-if="scope.row.status == 0">
                                有效
                            </el-tag>

                        </template>
                    </el-table-column>
                    <el-table-column fixed="right" label="操作" align="center"
                        width="180">
                        <template slot-scope="scope">
                            <el-button type="primary" size="mini"
                                @click="goChange(scope.row)">
                                修改
                            </el-button>
                            <el-button type="danger" size="mini"
                                @click="deleteMed(scope.row.id)">
                                删除
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <!-- 分页器 -->
                <Pagination :total="total" :pageSize="pageSize"
                    @getPagination="getPagination"></Pagination>
            </div>
        </el-card>

    </div>
</template>

<script>
import dayjs from 'dayjs'
import Pagination from '@/components/Pagination'
export default {
    name: '',
    components: {
        Pagination
    },
    data() {
        return {
            //导出清单需要数据
            headers: '药品列表',
            name: '药品清单',
            //配置表格标题字段对应文字
            json_fields: {
                // "订单编号":"code",
                //数字处理--
                "药品分类": "drugTypeName",
                "药品名称": "drugName",
                "药品编号": "serialNumber",
                "客户单价": "price",
                "负责人": "responseName",
                "供应商": "providerName",
                "状态": "status",
            },
            json_data: [],
            tableData: [],
            //分页
            total: 0,
            currentPage: 1,
            pageSize: 10,
            //搜索框
            keywordName: '',
            //设置默认值判断分页按钮
            default: 0,
            authSrc: {
                type: String,
                required: false,
                default: "",
            }

        }
    },
    created() {
        this.getMedList(this.currentPage, this.pageSize)
    },
    mounted(){
    //     let token = sessionStorage.getItem('tokenStr')
    // Object.defineProperty(Image.prototype, 'authsrc', {
    //   writable: true,
    //   enumerable: true,
    //   configurable: true
    // })
    // let img = this.$refs.img
    // let request = new XMLHttpRequest();
    // request.responseType = 'blob';
    // request.open('get', this.authSrc, true);
    // request.setRequestHeader('token', token);
    // request.onreadystatechange = e => {
    //   if (request.readyState == XMLHttpRequest.DONE && request.status == 200) {
    //     img.src = URL.createObjectURL(request.response);
    //     img.onload = () => {
    //         console.log(img.src);
    //       URL.revokeObjectURL(img.src);
    //     }
    //   }
    // };
    // request.send(null);

    },
    methods: {
        dayjs,
        //重置页面
        resetList() {
            this.getMedList(this.currentPage, this.pageSize)
        },
        // 新增药品
        addMedicine() {
            this.$router.push('/medicine/addMed')
        },
        //导出表格处理
        // download() {
        //     let arr = [...supplierExcelForm];
        //    
        //     
        // },
        //进入修改页面
        goChange(row) {
            if(row.status==0){
                 this.$router.push({ path: '/medicine/editMed', query: row })
            }else{
                this.$message.error('该状态下无法修改')
            }
           
        },
        //删除药品
        deleteMed(id) {
            this.$confirm('此操作将删除该种药品, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                // 执行删除
                this.deleteConfirm(id)
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        //----删除药品接口
        async deleteConfirm(id) {
            let res = await this.$api.medicine.delMed(id)
            console.log('删除单个跟进接口---', res.data);
            if (res.data.code === 200) {
                this.$message({
                    type: 'success',
                    message: '删除成功!'
                });
                //更新视图-------------------------
                this.getMedList(this.currentPage, this.pageSize)
            } else {
                console.log('删除失败');
                this.$message.error('删除失败');
            }
        },
        //-------------------------------获取点击的页码
        getPagination(page) {
            // console.log('======', this.total);
            this.currentPage = page;
            if (this.total == this.default) {
                this.getMedList(this.currentPage, this.pageSize)
            } else {
                this.normalSearch()
            }
        },
        //-------------------------------获取列表接口
        async getMedList(currentPage, pageSize) {
            let res = await this.$api.medicine.getMedList({ currentPage, pageSize })
            //列表
            if (res.data.code === 200) {
                this.tableData = res.data.data.list;
                console.log(this.tableData);
                this.json_data = this.tableData;
                //页码
                this.total = res.data.data.total;
                this.default = res.data.data.total;
            } else {
                console.log('请求失败');
                this.tableData = []
                this.pageSize = 0;
                this.total = 1;
            }
        },
        //搜索
        async normalSearch() {
            let res = await this.$api.medicine.searchDrugNormal(this.keywordName, this.currentPage, this.pageSize);
            console.log(res.data.data);
            this.tableData = res.data.data.list;
            // //页码
            this.total = res.data.data.total;
            this.keywordName = "";
        }

    },
}
</script>

<style lang="less" scoped>
.medicine {
    .main {
        background-color: rgba(128, 128, 128, 0.1);

        .topBtn {
            border-top: 3px solid #ccc;
            border-radius: 5px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 10px;
            padding: 5px 10px;
            background-color: #fff;
        }
    }
}
</style>